<template>
  <div class="MyFooter" v-show="this.todosTotalnNum != 0">
    <div class="rightone">
      <label class="bottomCheck">
        <input class="checkbox" type="checkbox" v-model="isAll" />
        <span>已完成{{ todoCheckedNum }}</span> / 全部{{ todosTotalnNum }}
      </label>
    </div>
    <div class="leftone">
      <button @click="clearAllTodos">清楚已完成任务</button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'MyFooter',
  props: {
    todoCheckedNum: Number,
    todosTotalnNum: Number
    // selectAll: Function,
    // clearAllTodos: Function,
  },
  data() {
    return {}
  },
  computed: {
    ...mapMutations('todoData', {selectAll:'SELECT_ALL'}),
    isAll: {
      get() {
        return (this.todoCheckedNum == this.todosTotalnNum ? true : false) && this.todoCheckedNum != 0
      },
      set(value) {
        // this.$emit('selectAll', value)
        this.selectAll(value)
        this.$eventBus.$emit('selectIsAll', value)
      }
    }
  },
  methods: {
    clearAllTodos() {
      this.$emit('clearAllTodos')
    }
  }
}
</script>

<style scoped lang="less">
.MyFooter {
  display: flex;
  // border-radius: 3px;
  // background-color: antiquewhite;
  padding: 0 20px 0 0;
  justify-content: space-between;

  .rightone {

    .bottomCheck{

      
      .checkbox {
        margin-left: 18px;
        margin-right: 10px;
      }
    }

    .bottomCheck:hover{
      cursor: pointer;
    }
  }

  .leftone {
    button {
      border: none;
      border-radius: 3px;
      width: 150px;
      height: 30px;
      background-color: rgb(230, 0, 0);
      color: white;
      cursor: pointer;
    }

    button:active {
      background-color: rgb(200, 0, 0);
    }
    button:hover {
      cursor: pointer;
    }
  }
}
</style>
